<template>
  <div class="head top_div">
    <div class="head-nav">
      <div class="logo" style>
        <img class="app_app_index" id="logo" v-bind:src="imgUrl+'/logo.png'">
      </div>
      <div class="head-nav-con clearFloat">
        <ul>
          <li class="drop-down">
            <a
              class="module-item item"
              id="module-btn-microdata"
              title="宏观数据"
              data-value="microdata"
            >
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-jc.png'">
                <span>宏观数据管理</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <li>
                <a
                  :disabled="menuItem.app_macro_economic.status"
                  data-url="app_macro_economic"
                  class="app_macro_economic disabled"
                  href="#"
                >宏观经济结构分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_new_town_industry.status"
                  data-url="app_new_town_industry"
                  class="app_new_town_industry disabled"
                  href="#"
                >新区产业结构分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_macro_search.status"
                  data-url="app_macro_search"
                  class="app_macro_search disabled"
                  href="#"
                >宏观数据查询</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_macro_form.status"
                  data-url="app_macro_form"
                  class="app_macro_form disabled"
                  href="#"
                >报表中心</a>
              </li>
            </ul>
          </li>
          <li class="drop-down">
            <a
              class="module-item item"
              id="module-btn-publicService"
              title="综合数据"
              data-value="gallery"
            >
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-tj.png'">
                <span>企业查询分析</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <li>
                <a
                  :disabled="menuItem.app_enterprise_search.status"
                  data-url="app_enterprise_search"
                  class="app_enterprise_search disabled"
                  href="#"
                >企业信息查询</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_enterprise_framework.status"
                  data-url="app_enterpapp_enterprise_frameworkrise_search"
                  class="app_enterprise_framework disabled hide"
                  href="#"
                >企业结构分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_one_company_one_record.status"
                  data-url="app_one_company_one_record"
                  class="app_one_company_one_record disabled"
                  href="#"
                >一企一档</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_online_report.status"
                  data-url="app_online_report"
                  class="app_online_report disabled"
                  href="#"
                >联网直报</a>
              </li>
            </ul>
          </li>
          <li class="drop-down">
            <a
              class="module-item item"
              id="module-btn-themeSearch"
              title="项目建设管理"
              data-value="macrodata"
            >
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-zt.png'">
                <span>项目建设管理</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <li>
                <a
                  :disabled="menuItem.app_project_manage.status"
                  data-url="app_project_manage"
                  class="app_project_manage disabled"
                  href="#"
                >项目管理</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_project_search.status"
                  data-url="app_project_search"
                  class="app_project_search disabled"
                  href="#"
                >项目查询分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_project_statistics.status"
                  data-url="app_project_statistics"
                  class="app_project_statistics disabled"
                  href="#"
                >项目统计</a>
              </li>
            </ul>
          </li>
          <li class="drop-down">
            <a
              class="module-item item"
              id="module-btn-macrodata"
              title="目标进度"
              data-value="macrodata"
            >
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-sj.png'">
                <span>目标进度管理</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <li>
                <a
                  :disabled="menuItem.app_objective.status"
                  data-url="app_objective"
                  class="app_objective disabled"
                  href="#"
                >目标制定</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_target_check.status"
                  data-url="app_target_check"
                  class="app_target_check disabled"
                  href="#"
                >目标考核</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_target_monitor.status"
                  data-url="app_target_monitor"
                  class="app_target_monitor disabled"
                  href="#"
                >进度监测</a>
              </li>
            </ul>
          </li>

          <li class="drop-down">
            <a class="module-item item" id="module-btn-visual" title="经济作战地图" data-value="visual">
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-zh.png'">
                <span>经济作战地图</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <li>
                <a
                  :disabled="menuItem.app_enterprise_space_search.status"
                  data-url="app_enterprise_space_search"
                  class="app_enterprise_space_search disabled"
                  href="#"
                >企业空间查询分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_gallery.status"
                  data-url="app_gallery"
                  class="app_gallery disabled"
                  href="#"
                >可视化专题分析</a>
              </li>
              <li>
                <a
                  :disabled="menuItem.app_industry_chain.status"
                  data-url="app_industry_chain"
                  class="app_industry_chain disabled"
                  href="#"
                >产业链</a>
              </li>
            </ul>
          </li>
          <li class="drop-down">
            <a
              class="module-item item"
              id="module-btn-bulletinfolder"
              title="信息管理"
              data-value="bulletinfolder"
            >
              <div class="module_img">
                <img v-bind:src="imgUrl+'/icon-np.png'">
                <span>信息管理</span>
              </div>
            </a>
            <ul class="drop-down-content">
              <!-- <li><a :disabled="menuItem.app_result_manage.status" data-url="app_result_manage" class="app_result_manage disabled" href='#'>成果管理</a></li> -->
              <li>
                <a
                  :disabled="menuItem.app_info_push.status"
                  data-url="app_info_push"
                  class="app_info_push disabled"
                  href="#"
                >信息推送</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div
        class="two wide column"
        style="float: right;display: inline-block;text-align: right;line-height: 50px"
      >
        <div class="item" id="user">
          <el-dropdown @command="userSelected">
            <span class="el-dropdown-link">
              <img class v-bind:src="imgUrl+'/admin.png'">
              <span id="userName">{{username}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="sys-btn-logout" command="sys-logout">注销</el-dropdown-item>
              <el-dropdown-item
                :disabled="menuItem.app_BI_tool.status"
                data-url="app_BI_tool"
                class="app_BI_tool disabled"
                command="app_BI_tool"
              >BI工具</el-dropdown-item>
              <el-dropdown-item
                :disabled="menuItem.app_drapt_tool.status"
                data-url="app_drapt_tool"
                class="app_drapt_tool disabled"
                command="app_drapt_tool"
              >制图工具</el-dropdown-item>
              <el-dropdown-item
                :disabled="menuItem.app_data_manage.status"
                data-url="app_data_manage"
                class="app_data_manage disabled"
                command="app_data_manage"
              >业务数据管理</el-dropdown-item>
              <el-dropdown-item
                :disabled="menuItem.app_system_manage.status"
                data-url="app_system_manage"
                class="app_system_manage disabled"
                command="app_system_manage"
              >系统管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="header_div">
      <span class="header_title">{{navTitle}}</span>
    </div>

    <!-- <div class="head-title" @click="backToP"></div>
        <div class="menu-items">
            <ul class="items">
                <li class="item" v-for="val in zdxmItems" :class="val.css" :key="val.pkid">
                    <router-link :to="val.descinfo">
                        <div class="img"></div>
                        <div class="word">{{val.name}}</div>
                        <div class="line"  v-if="item==val.descinfo"></div>
                    </router-link>
                </li>
                <li class="item newsmanager">
                    <a :href="newsManager" target="_blank">
                        <div class="img"></div>
                        <div class="word">新闻管理中心</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="head-icon"></div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="username-div">
                    <span>{{username}}</span>
                </span>
                <el-dropdown-menu slot="dropdown" class="exitDrop">
                    <el-dropdown-item command="loginout" style="width:36px;">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
    </div>-->
  </div>
</template>
<script>
import "../../../static/css/head.css";
// import {XJXQ} from "../../../static/config/config.js";//部署后可修改
// import $ from '../../../static/js/jquery-2.1.1.min.js';
import {
  logoutToLogin,
  getModules,
  getModulesById
} from "./../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import { apiGetUserInfo } from "../tool/Global/app-login-module.js";
import { zdxmId } from "./../tool/Global/app-config";

export default {
  props: ["item"],
  watch: {
    item(newValue, oldValue) {}
  },
  data() {
    return {
      imgUrl: LoginModuleConfig.imgUrl,
      username: "",
      zdxmItems: [],
      // newsManager:host.concat("/newsmanager"),
      navTitle: "", //二级导航标题
      loginStatus: false, //用户登陆状态
      menuItem: {
        //宏观数据管理
        app_macro_economic: {
          status: true,
          url: app_address.macro_data_manage.macro_economic,
          openType: ""
        },
        app_new_town_industry: {
          status: true,
          url: app_address.macro_data_manage.new_town_industry,
          openType: ""
        },
        app_macro_search: {
          status: true,
          url: app_address.macro_data_manage.macro_search,
          openType: ""
        },
        app_macro_form: {
          status: true,
          url: app_address.macro_data_manage.macro_form,
          openType: ""
        },
        //企业查询分析
        app_enterprise_search: {
          status: true,
          url: app_address.enterprise_search_analysis.enterprise_search,
          openType: ""
        },
        app_enterprise_framework: {
          status: true,
          url: app_address.enterprise_search_analysis.enterprise_framework,
          openType: ""
        },
        app_one_company_one_record: {
          status: true,
          url: app_address.enterprise_search_analysis.one_company_one_record,
          openType: ""
        },
        app_online_report: {
          status: true,
          url: app_address.enterprise_search_analysis.online_report,
          openType: ""
        },
        //项目建设管理
        app_project_manage: {
          status: true,
          url: app_address.project_build_manage.project_manage,
          openType: ""
        },
        app_project_search: {
          status: true,
          url: app_address.project_build_manage.project_search,
          openType: ""
        },
        app_project_statistics: {
          status: true,
          url: app_address.project_build_manage.project_statistics,
          openType: ""
        },
        //目标进度管理
        app_objective: {
          status: true,
          url: app_address.target_schedule_manage.objective,
          openType: ""
        },
        app_target_check: {
          status: true,
          url: app_address.target_schedule_manage.target_check,
          openType: ""
        },
        app_target_monitor: {
          status: true,
          url: app_address.target_schedule_manage.target_monitor,
          openType: ""
        },
        //经济作战地图
        app_enterprise_space_search: {
          status: true,
          url: app_address.economic_fight_map.enterprise_space_search,
          openType: ""
        },
        app_gallery: {
          status: true,
          url: app_address.economic_fight_map.gallery,
          openType: ""
        },
        app_industry_chain: {
          status: true,
          url: app_address.economic_fight_map.industry_chain,
          openType: ""
        },
        //信息管理
        app_result_manage: {
          status: true,
          url: app_address.info_manage.result_manage,
          openType: ""
        },
        app_info_push: {
          status: true,
          url: app_address.info_manage.info_push,
          openType: ""
        },
        //用户中心
        app_BI_tool: {
          status: true,
          url: app_address.user_manage.BI_tool,
          openType: ""
        },
        app_drapt_tool: {
          status: true,
          url: app_address.user_manage.drapt_tool,
          openType: ""
        },
        app_data_manage: {
          status: true,
          url: app_address.user_manage.data_manage,
          openType: ""
        },
        app_system_manage: {
          status: true,
          url: app_address.system_manage,
          openType: ""
        }
      }
    };
  },
  created() {
    let ref = this;
    ref.addNavBread();
    this.getUser(function() {
      getModulesById(zdxmId).then(function(result) {
        if (result.data.success) {
          ref.zdxmItems = result.data.data.datalist;
          ref.zdxmItems = ref.zdxmItems.sort(ref.compare("orderindex"));
        }
      });
    });
  },
  mounted: function() {
    this.$nextTick(function() {
      let self = this;
      $(".head-nav-con li a").on("click", function() {
        let status = $(this).attr("disabled");
        if (status === "disabled" && self.loginStatus) {
          this.$message("你没有权限访问该模块");
        } else if (status === "disabled" && !self.loginStatus) {
          this.$message("请先登陆");
        } else {
          let url = $(this).attr("data-url");
          let configurl = self.menuItem[url].url;
          if (self.menuItem[url].openType == "new") {
            window.open(configurl);
          } else {
            window.location.href = configurl;
          }
        }
      });
    });
  },
  methods: {
    /**
     * 用户中心选择后操作
     */
    userSelected(command) {
      let self = this;
      if (command === "sys-logout") {
        this.sysLogout();
      } else {
        let status = $(this).attr("disabled");
        if (status === "disabled" && self.loginStatus) {
          this.$message("你没有权限访问该模块");
        } else if (status === "disabled" && !self.loginStatus) {
          this.$message("请先登陆");
        } else {
          let configurl = self.menuItem[command].url;
          if (self.menuItem[command].openType == "new") {
            window.open(configurl);
          } else {
            window.location.href = configurl;
          }
        }
      }
    },
    sysLogout() {
      let that = this;
      let url = LoginModuleConfig.logoutUrl + "oAuth/logout";
      $.ajax({
        type: "GET",
        url: url,
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        dataType: "text",
        success: function(re) {
          that.close_wondow();
        },
        error: function(re) {
          console.log(re);
        }
      });
    },
    /**
     * 关闭当前窗口
     */
    close_wondow() {
      var userAgent = navigator.userAgent;
      if (
        userAgent.indexOf("Firefox") != -1 ||
        userAgent.indexOf("Presto") != -1 ||
        userAgent.indexOf("Chrome") != -1
      ) {
        window.location.replace("about:blank");
      } else {
        window.opener = null;
        window.open("", "_self");
        console.log("关闭窗口");
        window.close();
      }
    },
    /**
     * 根据权限初始化菜单是否可点击模块
     */
    initModule(power, callback) {
      let powerdata = power;
      for (let i in powerdata) {
        if (powerdata[i].powerType == 1) {
          if (powerdata[i].parid != 0) {
            //目前只有二级目录
            for (let j in powerdata) {
              if (powerdata[j].powerid === powerdata[i].parid) {
                let config_url = powerdata[i].powerValue;
                let ele = "app_" + powerdata[i].powerValue;
                if (this.menuItem.hasOwnProperty(ele)) {
                  this.menuItem[ele].status = false;
                }
                if (powerdata[i].memo === "new") {
                  this.menuItem[ele].openType = "new";
                }
                let eleClass = "." + ele;
                $(eleClass).removeClass("disabled");
              }
            }
          } else {
            let ele = "app_" + powerdata[i].powerValue;
            let eleClass = "." + ele;
            $(eleClass).removeClass("disabled");

            if (this.menuItem.hasOwnProperty(ele)) {
              this.menuItem[ele].status = false;
            }
          }
        }
      }
      callback && callback();
    },
    /***添加导航栏面包屑***/
    addNavBread() {
      let href = window.location.href;
      let page = href.split("/");
      let curPage = page[page.length - 1];
      let nav = "";
      switch (curPage) {
        case "dataBoard":
          nav = "宏观数据管理 < 宏观经济结构分析";
          break;
        case "dataBoard#":
          nav = "宏观数据管理 < 宏观经济结构分析";
          break;
        case "newTownIndustry":
          nav = "宏观数据管理 < 新区产业结构分析";
          break;
        case "newTownIndustry#":
          nav = "宏观数据管理 < 新区产业结构分析";
          break;
        case "idenForm":
          nav = "宏观数据管理 < 宏观经济指标及构成";
          break;
        case "idenForm#":
          nav = "宏观数据管理 < 宏观经济指标及构成";
          break;
        case "macro":
          nav = "宏观数据管理 < 宏观数据查询";
          break;
        case "macro#":
          nav = "宏观数据管理 < 宏观数据查询";
          break;
        case "report_center":
          nav = "宏观数据管理 < 报表中心";
          break;
        case "report_center#":
          nav = "宏观数据管理 < 报表中心";
          break;
        case "targetManagement":
          nav = "目标进度管理 < 进度检测";
          break;
        case "targetManagement#":
          nav = "目标进度管理 < 进度检测";
          break;
        case "enterprise_search#":
          nav = "企业查询分析 < 企业信息查询";
          break;
        case "enterprise_search":
          nav = "企业查询分析 < 企业信息查询";
        case "enterpriseVolum":
          nav = "企业查询分析 < 一企一档";
          break;
        case "enterpriseVolum#":
          nav = "企业查询分析 < 一企一档";
          break;
        case "base.html":
          nav = "经济作战地图 < 企业空间查询分析";
          break;
        case "industry_chain":
          nav = "经济作战地图 < 产业链";
          break;
        case "industry_chain#":
          nav = "经济作战地图 < 产业链";
          break;

        case "project_manage":
          nav = "项目建设管理 < 项目管理";
          break;
        case "project_manage#":
          nav = "项目建设管理 < 项目管理";
          break;
        case "project_show":
          nav = "项目建设管理 < 项目查询分析";
          break;
        case "project_show#":
          nav = "项目建设管理 < 项目查询分析";
          break;

        case "inDevelopment":
          nav = "";
          break;
        default:
          break;
      }

      this.navTitle = nav;
    },
    // backToP(){
    //     window.location.href = host+"/portal";
    // },
    // handleCommand(command) {
    //     let self = this;
    //     if(command == 'loginout'){
    //         logoutToLogin().then((res)=>{
    //             window.location.href = GeoAPP.Sites.Cas + "/logout?service="+LoginModuleConfig.loginUrl;

    //         })
    //     }
    // },
    getUser(callback) {
      let self = this;
      apiGetUserInfo()
        .then(res => {
          if (res.data.status) {
            self.loginStatus = true;
            let userInfo = res.data.user;
            let syspower = res.data.power;
            // var projDepartmentID = userInfo.data.resultInfo.data.depid;
            self.username = userInfo.userCaption;
            self.initModule(syspower, function() {
              if (typeof callback == "function") {
                callback();
              }
            });
            // self.menuItem['app_macro_economic'].status = false;
          } else {
            self.$message.error("请先登录");
            window.location.href = LoginModuleConfig.loginUrl;
          }
        })
        .catch(e => {
          console.log(e);
          self.$message.error("请先登录");
          window.location.href = LoginModuleConfig.loginUrl;
        });
    },
    // 指定排序的比较函数
    compare(property) {
      return function(obj1, obj2) {
        var value1 = obj1[property];
        var value2 = obj2[property];
        return value1 - value2; // 升序
      };
    }
  }
};
</script>
<style>
</style>

<style scoped>
.head {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../../../static/img/head.png");
}
.head .hide {
  display: none;
}
.head-title {
  cursor: pointer;
  height: 64px;
  width: 575px;
  background-size: 100% 100%;
  position: absolute;
  top: 30px;
  left: 60px;
  background-image: url("../../../static/img/headtitle.png");
}
.menu-items {
  position: absolute;
  top: 19px;
  right: 16%;
}
.item .img {
  width: 44px;
  height: 40px;
  margin: 0 auto;
  background-size: 100% 100%;
}
.item .line {
  width: 100px;
  height: 4px;
  background-image: url("../../../static/img/menuline.png");
  margin-top: 10px;
}
.item .word {
  width: 100px;
  margin-top: 10px;
  text-align: center;
  margin: 10px auto 0 auto;
  color: white;
}
li.item {
  display: inline-block;
  list-style-type: none;
  margin-right: 50px;
  cursor: pointer;
}
.newsmanager .img {
  background-image: url("../../../static/img/manager.png");
  background-size: 100% 100%;
}
.items li:last-child {
  margin-right: 0px;
}
.dynamic .img {
  background-image: url("../../../static/img/project-dynamic.png");
}
.xmzs .img {
  background-image: url("../../../static/img/project-show.png");
}
.xmgl .img {
  background-image: url("../../../static/img/project-manager.png");
}
.head-icon {
  position: absolute;
  height: 120px;
  width: 160px;
  right: 0px;
  background-image: url("../../../static/img/head-icon.png");
}
.user-info {
  position: absolute;
  top: 0px;
  right: 100px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  width: 186px;
  text-align: center;
  height: 20px;
  background-image: url(../../../static/img/login/userinfo-banner.png);
}
.user-info .el-dropdown-link {
  position: relative;
  display: inline-block;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  background-image: url(../../../static/img/img.jpg);
  background-size: cover;
  border-radius: 50%;
  margin-right: 10px;
  width: 40px;
  height: 40px;
}
.username-div {
  color: #fff;
}
</style>


